<template>
  <el-container>
    <el-header
      style="
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #efefef;
      "
    >
      <div style="display: flex; justify-content: center; align-items: center">
        <div>
          <el-button
            @click="openElmenu"
            type="text"
            style="color: #1074FD"
            v-if="isCollapse"
          >
            <i class="el-icon-s-unfold" style="font-size: 25px"></i>
          </el-button>
          <el-button
            @click="closeElmenu"
            type="text"
            style="color: #1074FD"
            v-else
          >
            <i class="el-icon-s-fold" style="font-size: 25px"></i>
          </el-button>
        </div>
        <div class="logo_text">{{ oemUserInfo.organName }}</div>
      </div>
      <div class="aa">
        <div class="bb">
          <i class="el-icon-bell" style="margin-right: 10px"></i>
          <span>电商：总授权数 {{ oemUserInfo.dsTotalNum }}</span>
          <span style="margin-left: 20px"
          >剩余 {{ oemUserInfo.dsTotalNum - oemUserInfo.dsUsedNum }}</span
          >
          <span style="margin-left: 20px">计数器：总授权数 {{ oemUserInfo.jsTotalNum }}</span>
          <span style="margin-left: 20px"
          >剩余 {{ oemUserInfo.jsTotalNum - oemUserInfo.jsUsedNum }}</span
          >
        </div>
        <div class="cc">
          <div
            style="
              margin-right: 5px;
              margin-left: 5px;
              display: flex;
              align-items: center;
            "
          >
            <img
              src="@/assets/img/initHeadPic.png"
              style="width: 30px; height: 30px; border-radius: 15px"
            />
          </div>
          <el-dropdown>
            <div>
              <span>{{ oemUserInfo.userName }}</span>
              <i class="el-icon-arrow-down" style="margin-left: 15px"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="editPwdDialig = true">修改密码</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="logout()">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            type="text"
            class="el-icon-switch-button"
            style="
              margin-left: 15px;
              margin-right: 15px;
              font-size: 20px;
              color: #999999;
            "
            @click="logout()"
          ></el-button>
        </div>
      </div>
    </el-header>
    <!--主体-->
    <el-container>
      <!--侧边栏-->
      <el-menu
        router
        collapse-transition
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        background-color="#ffffff"
        text-color="#666666"
        active-text-color="#1074FD"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <el-menu-item index="/oms/index">
          <i
            class="el-icon-data-line"
            style="font-size: 22px; margin-right: 20px"
          ></i>
          <span slot="title">概况统计</span>
        </el-menu-item>
        <el-menu-item index="/oms/Editpms">
          <i
            class="el-icon-menu"
            style="font-size: 22px; margin-right: 20px"
          ></i>
          <span slot="title">代理管理</span>
        </el-menu-item>
        <el-menu-item index="/oms/emsList">
          <i
            class="el-icon-user"
            style="font-size: 22px; margin-right: 20px"
          ></i>
          <span slot="title">企业管理</span>
        </el-menu-item>
        <el-menu-item index="/oms/use">
          <i
            class="el-icon-data-analysis"
            style="font-size: 22px; margin-right: 20px"
          ></i>
          <span slot="title">使用教程</span>
        </el-menu-item>
      </el-menu>
      <el-main
        v-bind:style="isCollapse === true ? 'left:66px;' : 'left:180px;'"
      >
        <router-view />
      </el-main>
      <el-dialog width="40%" title="修改密码" :visible.sync="editPwdDialig">
        <el-form
          ref="editPwdForm"
          :model="editPwdFormCopy"
          :rules="editPwdFormRules"
          size="mini"
          style="width: 70%; margin: 0 auto"
        >
          <el-form-item label="旧密码" label-width="120px" prop="oldPassword">
            <el-input
              v-model="editPwdFormCopy.oldPassword"
              type="password"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" label-width="120px" prop="newPassword">
            <el-input
              v-model="editPwdFormCopy.newPassword"
              type="password"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            label-width="120px"
            prop="newPassword2"
          >
            <el-input
              v-model="editPwdFormCopy.newPassword2"
              type="password"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editPwdDialig = false">取 消</el-button>
          <el-button type="primary" @click="editPwd">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </el-container>
</template>
<script>
import { isPassword } from "@/utils/validate";
import loginApi from "@/network/api/loginApi";
import { mapState } from "vuex";
import { createSign } from "@/utils/sign";
import { removeUserinfo } from "@/utils";
export default {
  name: "Oms",
  data() {
    const validatePassword2 = (rule, value, callback) => {
      // console.log(value)
      if (this.editPwdFormCopy.newPassword !== value) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      // console.log(rule, value)
      if (!isPassword(value)) {
        callback(new Error("密码不能少于6位"));
      } else {
        callback();
      }
    };
    return {
      isCollapse: false,
      drawer: false,
      editPwdDialig: false,
      imageUrl: "",
      logoutForm: {
        userId: 0,
        timestamp: ""
      },
      editPwdFormCopy: {
        oldPassword: "",
        newPassword: "",
        newPassword2: ""
      },
      editPwdForm: {
        userId: 0,
        oldPwd: "",
        newPwd: "",
        timestamp: ""
      },
      editPwdFormRules: {
        oldPassword: [
          {
            required: true,
            trigger: "blur",
            message: "该字段为必填字段"
          }
        ],
        newPassword: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword
          }
        ],
        newPassword2: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword2
          }
        ]
      },
      uploadHeadPicForm: {
        id: 0,
        domain: "",
        timestamp: ""
      },
      // 上传头像的dialog是否可见
      uploadHeadPicDialogVisible: false,
      // 存储要上传的图片信息
      fileList: [],
      // 请求头
      headers: {
        session_id: ""
      }
    };
  },
  created() {
    this.getUserInfo();
  },
  computed: {
    ...mapState(["oemUserInfo"])
  },
  methods: {
    openElmenu() {
      this.isCollapse = false;
    },
    closeElmenu() {
      this.isCollapse = true;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getUserInfo() {
      // // 登录信息存入localStorage
      // localStorage.setItem('loginUserInfo', JSON.stringify(res.data.data))
      this.$store.dispatch("loginInfo");
    },
    // 修改密码
    async editPwd() {
      this.$refs.editPwdForm.validate(async vali => {
        if (!vali) return;
        this.editPwdForm.newPwd = this.$md5(this.editPwdFormCopy.newPassword);
        this.editPwdForm.oldPwd = this.$md5(this.editPwdFormCopy.oldPassword);
        const str = JSON.parse(localStorage.getItem("updateUserInfo"));
        this.editPwdForm.userId = str.userId;
        this.editPwdForm.timestamp = new Date().getTime();
        delete this.editPwdForm.newPassword2;
        if (this.editPwdForm.sign) {
          delete this.editPwdForm.sign;
        }
        this.editPwdForm.sign = createSign(JSON.stringify(this.editPwdForm));
        await loginApi.editPassword(this.editPwdForm).then(res => {
          if (res.data.code === 0) {
            this.$message({
              type: "success",
              message: "密码修改成功，请退出重新登录！"
            });
            // localStorage.clear()
            removeUserinfo(res.data.data.token);
            this.$router.push("/login");
          } else {
            this.$message({
              type: "warning",
              // 取文字展示
              message: res.data.msg.match(/[\u4e00-\u9fa5]/g).join("")
            });
            this.editPwdForm.oldPwd = "";
            this.editPwdForm.newPwd = "";
            this.editPwdForm.newPassword2 = "";
            this.editPwdFormCopy.oldPassword = "";
            this.editPwdFormCopy.newPassword = "";
            this.editPwdFormCopy.newPassword2 = "";
            // this.$refs.editPwdForm.resetFields()
          }
        });
        this.editPwdDialig = false;
        this.editPwdForm.newPassword2 = "";
      });
    },
    logout() {
      const str = JSON.parse(localStorage.getItem("updateUserInfo"));
      this.logoutForm.userId = str.userId;
      this.logoutForm.timestamp = new Date().getTime();
      if (this.logoutForm.sign) {
        delete this.logoutForm.sign;
      }
      this.logoutForm.sign = createSign(JSON.stringify(this.logoutForm));
      loginApi.userLogout(this.logoutForm).then(res => {
        if (res.data.code === 0) {
          this.$message({
            type: "success",
            message: "退出成功"
          });
          // localStorage.clear()
          removeUserinfo(res.data.data.token);
          this.$router.push("/login");
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.aa {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 60%;
}
.bb {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
}
.cc {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  align-items: center;
  height: 100%;
  width: 40%;
  justify-content: flex-end;
}
.el-container {
  height: 100%;
}
.el-main {
  position: absolute;
  background-color: #efefef;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
}
.el-menu {
  border-right: 0;
}

.is-active {
  background-color: #f4f9ff !important;
}

.el-menu-item,
.el-submenu__title {
  padding-right: 50px;
  font-size: 18px;
}

.tab-bar-item {
  text-align: center;
}
.tab-bar-item img {
  width: 24px;
  height: 24px;
}
.logo_text {
  line-height: 30px;
  font-size: 20px;
  color: #1074fd;
  font-weight: bold;
  font-family: "Helvetica Neue";
  letter-spacing: 2px;
  margin-left: 10px;
}

/deep/ .el-tabs__item {
  font-size: 16px !important;
}
/deep/ .el-dialog__header {
  background-color: #d9d9d9;
}
</style>
